<template>
	<div class="colorful">
		<div class="top">
			<b>{{theme.content}}</b><span>更多<i class="iconfont">&#xe678;</i></span>
		</div>
		<div class="content">
			<div class="lie"><img :src="theme.data[0].thumb"></div>
			<div class="lie2">
				<div class="ri">
					<img :src="theme.data[1].thumb">
				</div>
				<div class="dong">
					<div class="chuan"><img :src="theme.data[2].thumb"></div>
					<div class="chuan"><img :src="theme.data[3].thumb"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		props:['theme']
	}
</script>
<style lang='stylus' scoped>
	.top{
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding:.3rem .26rem 0 0;
		font-size: .45rem;
		border-top: .3rem solid #f5f5f5;
		padding-bottom: .26rem;
		b{
			padding-left: .6rem;
			border-left: .1rem solid #f4d101;
			color: #f4d101;
		}
		span{
			color: #7d7b7b;
			font-size: .35rem;
		}
	}
	.content{
		width: 100%;
		display: flex;
		padding:.26rem;
		justify-content: space-between;
	}
	.lie{
		width: 33%;
		img{
			width: 100%;
		}
	}
	.lie2{
		width: 66%;
		.ri{
			width: 100%;
			height: 50%;
			img{
				width: 100%;
			}
		}
		.dong{
			width: 100%;
			height: 50%;
			display: flex;
			.chuan{
				width: 50%;
				img{
					width: 100%;
				}
			}
		}
	}
</style>